



        main #banner{
            padding-bottom: 100%;
            position: relative;
        }
        main #banner::after{
            content: '';
            pointer-events: none;
            background: url(../img/index/shadow.png) top center no-repeat;
            background-size: cover;
            opacity: .7;
            z-index: 3;
        }
        main #banner .headSwp{
            height: 100%;
        }
        main #banner .headSwp .swiper-pagination{
            bottom: 175px;
        }
        main #banner .headSwp .swiper-pagination span{
            margin: 0px 20px;
            width: 40px;
            height: 40px;
            background: transparent;
            border: 2px solid #fff;
            opacity: 1;
            vertical-align: top;
        }
        main #banner .headSwp .swiper-pagination .swiper-pagination-bullet-active{
            background: #f3d6c1;
        }
        main #banner .txt{
            z-index: 4;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            top: 0px;
            font-weight: bolder;
            color: #fff;
            text-align: right;
            line-height: 1;
            padding-top: 12vh;
            pointer-events: none;
        }
        main #banner .txt .inner{
            overflow: hidden;
        }
        main #banner .txt .inner span{
            transform: translateX(100%);
            transition: transform .5s .6s;

        }        
        main #banner .txt.frozen .inner span{
            transform: translateX(0px);
            display: inline-block;
            vertical-align: top;
        }
        main #banner .txt p:first-child{
            color: #f1958c;
            font-size: 13.2vw;
            margin-bottom: 85px;
            text-align: left;
            opacity: 0;
            transition: opacity .4s .5s;
        }
        main #banner .txt.frozen p:first-child{
            opacity: 1;
        }
        main #banner .txt p:nth-child(2){
            font-size: 7.3vw;
            margin-bottom: 32px;
        }
        main #banner .txt .inner>span{
            background-color: #f1958c;
            line-height: 5.625vw;
            border-radius: 5.625vw;
            padding: 0px 28px;
            font-size: 3.9vw;
            font-weight: bold;
            transition-delay: .75s;
        }
        
        main .adv{
            overflow: hidden;
        }
        main .adv .ttl,
        main #store .ttl{
            padding-top: 275px;
        }
        main .adv .swiper,
        main #store .swiper{
            margin-top: 60px;
            padding: 140px 0px;
            padding-left: 230px;
            position: relative;
        }
        main .adv .swiper::before,
        main #store .swiper::before{
            content: '';
            position: absolute;
            top: 0px;
            left: 0px;
            width: 400px;
            height: 100%;
            background: #f1958c;
            border-top-right-radius: 80px;
            border-bottom-right-radius: 80px;
            transform: translateX(-100%);
            transition: transform .6s;
        }
        main .adv .swiper.frozen::before,
        main #store .swiper.frozen::before{
            transform: translateX(0px);
        }
        main .adv .swiper .btn,
        main #store .swiper .btn{
            cursor: pointer;
            position: absolute;
            left: 90px;
            width: 110px;
            height: 110px;
            border: 2px solid #fff;
            border-radius: 50%;
            opacity: 0;
            transition: margin .6s,opacity .6s,transform .6s;
        }
        .mobileDevice main .adv .swiper .btn,
        .mobileDevice main #store .swiper .btn{
            display: none;
        }
        main .adv .swiper .btn img,
        main #store .swiper .btn img{
            transition: transform .4s;
        }
        main .adv .swiper .btn:hover img,
        main #store .swiper .btn:hover img{
            transform: scale(.7);
        }
        main .adv .swiper .btn.frozen,
        main #store .swiper .btn.frozen{
            opacity: 1;
        }
        main .adv .swiper .btn img,
        main #store .swiper .btn img{
            width: 45px;
        }
        main .adv .swiper .prev,
        main #store .swiper .prev{
            top: 50%;
        }
        main .adv .swiper .prev.frozen,
        main #store .swiper .prev.frozen{
            margin-top: 50px;
            transform: rotate(-360deg);
        }
        main .adv .swiper .next,
        main #store .swiper .next{
            bottom: 50%;
        }
        main .adv .swiper .next.frozen,
        main #store .swiper .next.frozen{
            margin-bottom: 50px;
            transform: rotate(360deg);
        }
        main .adv .swiper .advSwp{
            padding: 10px;
            padding-right: 0px;
            transform: translateX(100%);
            transition: .8s transform;
        }
        main .adv .swiper .advSwp.frozen{
            transform: translateX(0%);
        }
        main .adv .swiper .advSwp .swiper-slide{
            overflow: hidden;
            cursor: pointer;
            width: 564px;
            border-radius: 48px;
            box-shadow: 0px 0px 10px 5px rgba(0,0,0,.08);
            transition: width .5s;
        }
        main .adv .swiper .advSwp .swiper-slide .pic{
            padding-bottom: 75%;
            position: relative;
        }
        main .adv .swiper .advSwp .swiper-slide .t{
            background: #fff;
            text-align: center;
            padding-bottom: calc(75% - 48px);
            position: relative;
        }
        main .adv .swiper .advSwp .swiper-slide .t .inner{
            width: 100%;
            font-size: 65px;
            font-weight: bold;
            line-height: 1;
        }
        main .adv .swiper .advSwp .swiper-slide .t .inner p:last-child{
            display: inline-block;
            vertical-align: top;
            line-height: 90px;
            border-radius: 90px;
            width: 440px;
            background: #f1958c;
            color: #fff;
            font-weight: normal;
            margin-top: 20px;
        }
        main .adv .swiper .advSwp .swiper-slide i{
            display: block;
            height: 48px;
            background: #f3d6c1;
        }

        main #dev .content{
            position: relative;
            z-index: 2;
            margin-top: 90px;
        }
        main #dev .question .inner{
            background: url(../img/index/devQ1.png) right no-repeat;
        }
        main #dev .in{
            border-top-left-radius: 185px;
            border-top-right-radius: 185px;
            border-bottom-left-radius: 90px;
            border-bottom-right-radius: 90px;
            background: #fff;
            box-shadow: 0px 10px 15px 10px rgba(0,0,0,.14);
        }
        main #dev .in .txt{
            padding: 70px;
            padding-top: 0px;
            margin-top: 125px;
        }
        main #dev .in .txt .pic{
            width: 560px;
            border-bottom-left-radius: 45px;
            overflow: hidden;
        }
        main #dev .in .txt .t{
            flex: 1;
            font-size: 60px;
            line-height: 1.5;
            color: #7d8087;
            padding-left: 80px;
        }
        main #dev .in .txt .t span{
            font-weight: bold;
            color: #f1958c;
            font-size: 72px;
        }
        main #dev .more{
            padding-top: 330px;
            margin-top: -250px;
            padding-bottom: 50px;
            text-align: center;
            background: #f1958c;
        }
        main #dev .more a{
            display: inline-block;
            vertical-align: top;
            line-height: 90px;
            font-size: 61px;
            color: #7d8087;
            padding: 0px 40px;
            position: relative;
            z-index: 2;
        }
        main #dev .more a::after{
            content: '';
            z-index: -1;
            background: #fff;
            border-radius: 90px;
            transition: transform .4s;
        }
        main #dev .more a:hover::after{
            transform: scale(1.1);
        }

        main #service .question{
            margin: 80px auto;
        }
        main #service .question .inner{
            background: url(../img/index/devQ2.png) right no-repeat;
        }
        
        main #service .edu .item{
            margin-top: 80px;
        }
        main #service .edu .item:first-child{
            margin-top: 0px;
        }
        main #service .edu .item .list{
            overflow: hidden;
            position: relative;
            z-index: 2;
        }
        main #service .edu .item .list .box{
            margin-left: 30px;
            width: calc(100% / 3 - 20px);
            float: left;
            background: #fff;
            border-radius: 48px;
            overflow: hidden;
            text-align: center;
            opacity: 0;
            transform: translateY(30px);
            transition: transform .6s,opacity .6s;
        }
        main #service .edu .item .list .box.frozen{
            opacity: 1;
            transform: translateY(0px);
        }
        main #service .edu .item .list .box:nth-child(3n + 1){
            margin-left: 0px;
        }
        main #service .edu .item .list .box .pic{
            padding-bottom: 75%;
            position: relative;
        }
        main #service .edu .item .list .box p:last-child{
            height: 230px;
            font-size: 78px;
            color: #595757;
        }
        main #service .edu .item>p{
            font-weight: bold;
            font-size: 100px;
            color: #fff;
            text-align: center;
            margin-top: -230px;
            padding-top: 295px;
            line-height: 1;
            padding-bottom: 40px;
            position: relative;
            z-index: 1;
        }
        main #service .edu .item>p::after{
            content: '';
            z-index: -1;
            transition: transform 1s;
            background: #f1958c;
            transform: scaleX(0);
        }
        main #service .edu .item>p.frozen::after{
            transform: scaleX(1);
        }

        main .compare{
            padding-bottom: 40px;
            margin-bottom: -40px;
            overflow: hidden;
        }
        main .compare .heading{
            margin-top: 120px;
            font-size: 93px;
            font-weight: bold;
            margin-bottom: 55px;
            color: #595757;
        }
        main .compare .heading img{
            width: 260px;
            display: inline-block;
            vertical-align: top;
        }
        main .compare .heading p{
            width: calc(50% - 195px);
        }
        main .compare .heading p:first-child{
            text-align: right;
        }
        main .compare .heading p:last-child{
            margin-left: -45px;
        }
        main .compare .heading span{
            width: 390px;
            text-align: center;
        }
        main .compare .list .item{
            height: 325px;
            margin-top: 10px;
            color: #595757;
            position: relative;
        }
        main .compare .list .item div{
            width: calc(50% - 10px);
            float: left;
            height: 100%;
            background: #fff;
            font-size: 3.8vw;
            flex-direction: column;
            box-shadow: 0px 0px 15px 10px rgba(0,0,0,.08);
            opacity: 0;
            transition: transform .5s,opacity .5s;
        }
        main .compare .list .item div:first-child{
            text-align: right;
            border-top-right-radius: 50px;
            border-bottom-right-radius: 50px;
            color: #f1958c;
            font-weight: bold;
            padding-right: 190px;
            transform: translateX(-60px);
        }
        main .compare .list .item div:last-child{
            margin-left: 20px;
            text-align:left;
            border-top-left-radius: 50px;
            border-bottom-left-radius: 50px;
            padding-left: 190px;
            transform: translateX(60px);
        }
        main .compare .list .item.frozen div{
            opacity: 1;
            transform: translateX(0px) !important;
        }
        main .compare .list .item>p{
            width: 225px;
            height: 225px;
            line-height: 225px;
            font-size: 95px;
            font-weight: bolder;
            background: #f1958c;
            color: #fff;
            text-align: center;
            border-radius: 50%;
            transform: translate(-50%,-50%) scale(0);
            opacity: 0;
            z-index: 2;
            transition: transform .5s,opacity .5s;
        }
        main .compare .list .item.frozen>p{
            opacity: 1;
            transform: translate(-50%,-50%) scale(1);
        }
        main .compare .list .item:nth-child(even)>p{
            background: #f3d6c1;
            color: #595757;
        }

        main .join .question{
            margin: 80px auto;
        }
        main .join .question .inner{
            background: url(../img/index/devQ3.png) right no-repeat;
        }
        main .join .list .inner{
            margin-left: -30px;
            flex-wrap: wrap;
        }
        main .join .list .item{
            width: calc(100% / 3 - 30px);
            margin-left: 30px;
            color: #595757;
            border-radius: 48px;
            overflow: hidden;
            background: #f1958c;
            font-size: 78px;
            box-shadow: 0px 0px 20px 10px rgba(0,0,0,.08);
            opacity: 0;
            transform: translateY(30px);
            transition: .6s opacity,transform .6s;
        }
        main .join .list .item.frozen{
            opacity: 1;
            transform: translateY(0px);
        }
        main .join .list .item:nth-child(even){
            background: #f3d6c1;
        }
        main .join .list .item:nth-child(n + 4){
            margin-top: 40px;
        }
        main .join .list .item .pic{
            padding-bottom: 75%;
            position: relative;
        }
        main .join .list .item .txt{
            height: 230px;
            background: #fff;
            text-align: center;
        }

        main #contact .ttl{
            margin-bottom: 80px;
        }
        main #contact .ttl span{
            color: #595757;
            background: transparent;
        }
        main #contact .ttl i{
            font-style: normal;
        }
        main #contact .form-group{
            position: relative;
            margin-top: 20px;
        }
        main #contact .form-group.code{
            display: none;
        }
        main #contact .form-group .title{
            color: #f1958c;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0px;
            font-size: 90px;
        }
        main #contact .code .title{
            left: auto;
            right: 60px;
            color: #595757;
            padding-left: 40px;
            border-left: 2px solid #999ea0; 
        }
        main #contact .form-group .title::after{
            content: '*';
            position: absolute;
            top: 0px;
            left: calc(100% + 15px);
        }
        main #contact .code .title::after{
            display: none;
        }
        main #contact .city img{
            width: auto;
            position: absolute;
            bottom: 50%;
            z-index: 2;
            transform: translateY(50%);
            right: 60px;
        }
        main #contact input{
            width: calc(100% - 300px);
            margin-left: 300px;
            line-height: 160px;
            color: #595757;
            padding: 0px 60px;
            font-size: 75px;
            box-shadow: 0px 0px 20px 10px rgba(0,0,0,.1);
            background: #fff;
            border-radius: 160px;
        }
        main #contact input::placeholder{
            color: #b5b5b6;
        }
        main #contact .agree{
            margin-top: 80px;
            margin-bottom: 100px;
            position: relative;
            padding-left: 115px;
            color: #595757;
            font-size: 66px;
            line-height: 1;
        }
        main #contact .agree i{
            border-radius: 50%;
            overflow: hidden;
            width: 80px;
            height: 80px;
            border: 2px solid #3281ff;
            position: absolute;
            top: 50%;
            left: 0px;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 66px;
        }
        main #contact .agree i.clicked{
            border-width: 0px;
            background: #3281ff;
        }
        main #contact .agree i img{
            width: auto;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 15px;
        }
        main #contact .agree span{
            color: #3281ff;
            margin-left: 30px;
            display: inline-block;
        }
        main #contact .submit{
            line-height: 150px;
            font-size: 85px;
            color: #fff;
            text-align: center;
            width: 100%;
            margin: 0 auto;
            transition: width .4s;
            position: relative;
            z-index: 2;
        }
        main #contact .submit::after{
            content: '';
            left: 50%;
            border-radius: 150px;
            background: #f1958c;
            transition: width .5s;
            transform: translateX(-50%);
            z-index: -1;
        }
        main #contact .submit:hover::after{
            width: 90%;
        }
        

        main #store{
            overflow: hidden;
            position: relative;
            z-index: 2;
        }
        main #store .swiper{
            margin-top: 60px;
            padding: 130px 0px;
            padding-left: 320px;
            position: relative;
        }
        main #store .swiper::before{
            width: 490px;
        }
        main #store .swiper .btn{
            left: 180px;
        }
        main #store .swiper .storeSwp{
            height: 83vh;
            position: relative;
            overflow: hidden;
            transform: translateX(100%);
            transition: .8s transform;
        }
        main #store .swiper .storeSwp.frozen{
            transform: translateX(0%);
        }
        main #store .swiper .storeSwp .palace{
            transition: all .5s;
        }
        .mobileDevice main #store .swiper .storeSwp .palace{
            display:box;
            display: -webkit-box; 
            display: -moz-box;
            display: -webkit-flex; 
            display: -moz-flex; 
            display: -ms-flexbox;
            display: flex;
            white-space: nowrap;
            overflow-x: auto;
        }
        .mobileDevice main #store .swiper .storeSwp .item{
            flex-shrink: 0;
            -webkit-flex-shrink: 0;
            -ms-flex-negative: 0;
        }
        .mobileDevice main #store .swiper .storeSwp .item:first-child{
            position: relative !important;
        }
        .mobileDevice main #store .swiper .storeSwp .item:nth-child(2n){
            position: relative !important;
            left: 0px !important;
            top: 0px !important;
            margin-left: 20px;
        }
        main #store .swiper .storeSwp .item{
            height: calc(50% - 10px);
            width: 545px;
            transition: .4s all;
            border-radius: 45px;
            overflow: hidden;
            cursor: pointer;
            position: absolute;
        }
        main #store .swiper .storeSwp .item img{
            transition: all .4s;
        }
        main #store .swiper .storeSwp .item:hover img{
            transform: scale(1.05);
        }
        main #store .swiper .storeSwp .item:nth-child(odd){
            top: calc(50% + 10px)
        }
        main #store .swiper .storeSwp .item:first-child{
            width: 670px;
            height: 100%;
            left: 0px;
            top: 0px !important;
        }
        
        main .btm{
            margin-top: -155px;
            height: 74vh;
            opacity: .41;
            -webkit-filter: grayscale(100%); 
            -moz-filter: grayscale(100%); 
            -ms-filter: grayscale(100%); 
            -o-filter: grayscale(100%); 
            filter: grayscale(100%);
        }

        
        @media(min-width:1751px){
            main #service .question .inner .t{
                font-size: 94px;
            }
        }
        @media(max-width:1750px){
            main #service .question .inner .t{
                font-size: 86px;
            }


            main #banner .txt p:first-child{
                font-size: 10vw;
                margin-bottom: 40px;
            }
            main #banner .txt p:nth-child(2){
                font-size: 6vw;
            }
            main #banner .txt>span{
                font-size: 3.2vw;
                line-height: 5.25vw;
            }

            main .adv .ttl,
            main #store .ttl{
                padding-top: 180px;
            }
            main .adv .swiper{
                padding-top: 110px;
                padding-bottom: 110px;
            }
            main .adv .swiper .btn,
            main #store .swiper .btn{
                width: 90px;
                height: 90px;
            }
            main .adv .swiper .btn img, 
            main #store .swiper .btn img{
                width: 36px;
            }
            main .adv .swiper .advSwp .swiper-slide{
                width: 480px;
                border-radius: 36px;
            }
            main .adv .swiper .advSwp .swiper-slide .t{
                padding-bottom: calc(75% - 48px);
            }
            main .adv .swiper .advSwp .swiper-slide .t .inner{
                font-size: 50px;
            }
            main .adv .swiper .advSwp .swiper-slide .t .inner p:last-child{
                line-height: 70px;
                border-radius: 70px;
            }
            main .adv .swiper .advSwp .swiper-slide i{
                height: 36px;
            }

            main #dev .in {
                border-top-left-radius: 170px;
                border-top-right-radius: 170px;
            }
            main #dev .question{
                width: 100% !important;
            }
            main #dev .in .txt .pic{
                width: 500px;
            }
            main #dev .in .txt .t{
                padding-left: 60px;
                font-size: 50px;
            }
            main #dev .in .txt .t span{
                font-size: 64px;
            }
            main #dev .more a{
                font-size: 50px;
                line-height: 75px;
            }

            main #service .edu .item .list .box p:last-child {
                height: 200px;
                font-size: 60px;
            }
            main #service .edu .item>p{
                margin-top: -200px;
                padding-top: 265px;
                font-size: 80px;
            }

            main .compare .heading{
                margin-top: 70px;
                margin-bottom: 40px;
                font-size: 80px;
            }
            main .compare .heading img{
                width: 210px;
            }
            main .compare .list .item{
                height: 280px;
            }
            main .compare .list .item div{
                font-size: 3.5vw;
            }
            main .compare .list .item div:first-child{
                padding-right: 160px;
            }
            main .compare .list .item div:last-child{
                padding-left: 160px;
            }
            main .compare .list .item>p{
                width: 200px;
                height: 200px;
                line-height: 200px;
                font-size: 80px;
            }

            main .join .list .item{
                font-size: 60px;
            }
            main .join .list .item .txt{
                height: 200px;
            }

            main #contact .form-group .title{
                font-size: 80px;
            }
            main #contact input{
                font-size: 60px;
                line-height: 120px;
                border-radius: 120px;
            }
            main #contact .form-group .title{
                font-size: 64px;
            }
            main #contact .agree{
                font-size: 60px;
            }
            main #contact .submit{
                font-size: 70px;
                line-height: 120px;
            }

            main #store .swiper .storeSwp .item{
                width: 500px;
            }
            main #store .swiper .storeSwp .item:first-child{
                width: 600px;
            }
        }

        @media(max-width:1650px){
            main #banner .headSwp .swiper-pagination span{
                width: 30px;
                height: 30px;
                margin: 0px 15px;
            }

            main .adv .swiper .advSwp .swiper-slide{
                width: 450px;
            }
            main .adv .swiper .advSwp .swiper-slide .t{
                padding-bottom: 200px;
            }
            main .adv .swiper .advSwp .swiper-slide .t .inner{
                font-size: 36px;
            }
            main .adv .swiper .advSwp .swiper-slide .t .inner p:last-child{
                width: 280px;
                line-height: 54px;
                border-radius: 54px;
            }

            main #dev .in{
                border-top-left-radius: 90px;
                border-top-right-radius: 90px;
            }
            main #dev .in .txt{
                padding-left: 40px;
                padding-right: 40px;
            }
            main #dev .in .txt .pic{
                width: 400px;
            }
            main #dev .in .txt .t{
                font-size: 42px;
                padding-left: 30px;
            }
            main #dev .in .txt .t span{
                font-size: 50px;
            }
            
            main #service .edu .item .list .box p:last-child{
                font-size: 45px;
                height: 150px;
            }
            main #service .edu .item>p{
                font-size: 68px;
                margin-top: -150px;
                padding-top: 200px;
            }

            main .compare .heading{
                font-size: 60px;
            }
            main .compare .heading img{
                width: 170px;
            }
            main .compare .heading span{
                width: 320px;
            }
            main .compare .heading p {
                width: calc(50% - 160px);
            }
            main .compare .list .item{
                height: 220px;
            }
            main .compare .list .item div{
                font-size: 45px;
            }
            main .compare .list .item div:first-child{
                padding-right: 120px;
            }
            main .compare .list .item div:last-child{
                padding-left: 120px;
            }
            main .compare .list .item>p {
                width: 160px;
                height: 160px;
                line-height: 160px;
                font-size: 60px;
            }

            main .join .list .item {
                font-size: 45px;
                border-radius: 36px;
            }
            main .join .list .item .txt{
                height: 160px;
            }

            main #contact .form-group .title{
                font-size: 48px;
            }
            main #contact .code .title{
                padding-left: 25px;
                right: 40px;
            }
            main #contact .city img{
                right: 40px;
                width: 60px;
            }
            main #contact input {
                font-size: 40px;
                line-height: 100px;
                border-radius: 100px;
                padding: 0px 40px;
            }
            main #contact .agree{
                font-size: 45px;
                padding-left: 90px;
            }
            main #contact .agree i{
                width: 60px;
                height: 60px;
            }
            main #contact .agree i img{
                left: 8px;
            }
            main #contact .submit {
                font-size: 60px;
                line-height: 100px;
            }

            main #store .swiper{
                padding-left: 240px;
            }
            main #store .swiper .btn{
                left: 100px;
            }
            main #store .swiper::before{
                width: 360px;
            }
            main #store .swiper .storeSwp .item{
                width: 420px;
                border-radius: 36px;
            }
            main #store .swiper .storeSwp .item:first-child{
                width: 540px;
            }

            main .btm{
                height: 50vw;
            }
        }

        @media(max-width:1200px){
            main #banner .headSwp .swiper-pagination span {
                width: 20px;
                height: 20px;
                margin: 0px 10px;
            }
            
            main .adv{
                margin-top: 50px;
            }
            main .adv .swiper {
                padding-top: 60px;
                padding-bottom: 60px;
            }
            main .adv .swiper::before, 
            main #store .swiper::before{
                width: 280px;
                border-top-right-radius: 50px;
                border-bottom-right-radius: 50px;
            }
            main .adv .swiper .btn, 
            main #store .swiper .btn{
                left: 50px;
                width: 68px;
                height: 68px;
            }
            main .adv .swiper .btn img, 
            main #store .swiper .btn img{
                width: 26px;
            }
            main .adv .swiper, 
            main #store .swiper{
                padding-left: 160px;
            }
            main .adv .swiper .prev.frozen, 
            main #store .swiper .prev.frozen{
                margin-top: 30px;
            }
            main .adv .swiper .next.frozen, 
            main #store .swiper .next.frozen{
                margin-bottom: 30px;
            }
            main .adv .swiper .advSwp .swiper-slide{
                width: 360px;
                border-radius: 24px;
            }
            main .adv .swiper .advSwp .swiper-slide .t{
                padding-bottom: 160px;
            }
            main .adv .swiper .advSwp .swiper-slide .t .inner{
                font-size: 30px;
            }
            main .adv .swiper .advSwp .swiper-slide .t .inner p:last-child{
                width: auto;
                padding: 0px 30px;
                line-height: 1.6;
                border-radius: 48px;
            }
            main .adv .swiper .advSwp .swiper-slide i{
                height: 24px;
            }

            main #dev .content{
                margin-top: 60px;
            }
            main #dev .in {
                border-radius: 70px;
            }
            main #dev .in .txt{
                margin-top: 80px;
                padding-bottom: 40px;
            }
            main #dev .in .txt .pic{
                width: 360px;
            }
            main #dev .in .txt .t{
                font-size: 36px;
            }
            main #dev .in .txt .t span{
                font-size: 45px;
            }
            main #dev .more {
                padding-top: 240px;
                margin-top: -200px;
            }
            main #dev .more a{
                font-size: 40px;
                line-height: 68px;
            }

            main #service .question{
                margin: 60px auto;
            }
            main #service .edu .item .list .box{
                border-radius: 24px;
                width: calc(100% / 3 - 10px);
                margin-left: 15px;
            }
            main #service .edu .item .list .box p:last-child{
                font-size: 30px;
                height: 100px;
            }
            main #service .edu .item>p{
                font-size: 45px;
                margin-top: -100px;
                padding-top: 130px;
                padding-bottom: 30px;
            }

            main .compare .heading{
                font-size: 40px;
            }
            main .compare .heading img{
                width: 120px;
            }
            main .compare .heading span{
                width: 240px;
            }
            main .compare .heading p {
                width: calc(50% - 120px);
            }
            main .compare .list .item{
                height: 150px;
            }
            main .compare .list .item div{
                font-size: 30px;
            }
            main .compare .list .item div:first-child{
                padding-right: 90px;
                border-top-right-radius: 24px;
                border-bottom-right-radius: 24px;
            }
            main .compare .list .item div:last-child{
                padding-left: 90px;
                border-top-left-radius: 24px;
                border-bottom-left-radius: 24px;
            }
            main .compare .list .item>p {
                width: 120px;
                height: 120px;
                line-height: 120px;
                font-size: 40px;
            }

            main .join .list .inner{
                margin-left: -15px;
            }
            main .join .list .item {
                font-size: 30px;
                margin-left: 15px;
                width: calc(100% / 3 - 15px);
                border-radius: 24px;
            }
            main .join .list .item .txt{
                height: auto;
                padding: 15px 0px;
            }

            main #contact .form-group .title{
                font-size: 48px;
            }
            main #contact .code .title{
                padding-left: 25px;
                right: 40px;
                font-size: 36px;
            }
            main #contact .city img{
                right: 40px;
                width: 50px;
            }
            main #contact input {
                font-size: 30px;
                line-height: 80px;
                border-radius: 80px;
                padding: 0px 30px;
            }
            main #contact .agree{
                font-size: 35px;
                padding-left: 70px;
                margin-top: 50px;
                margin-bottom: 60px;
            }
            main #contact .agree i{
                width: 45px;
                height: 45px;
            }
            main #contact .agree i img{
                width: 80%;
            }
            main #contact .submit {
                font-size: 42px;
                line-height: 80px;
            }

            main #store .swiper{
                padding-top: 80px;
                padding-bottom: 80px;
            }
            main #store .swiper .storeSwp{
                height: 50vh;
            }
            main #store .swiper .storeSwp .item{
                width: 360px;
                border-radius: 30px;
            }
            main #store .swiper .storeSwp .item:first-child{
                width: 450px;
            }

            main .btm{
                margin-top: -100px;
                height: 480px;
            }
        }

        @media(max-width:1000px){
            main .adv .swiper, 
            main #store .swiper{
                padding-left: 120px;
            }
            main .adv .swiper::before, 
            main #store .swiper::before{
                width: 220px;
                border-top-right-radius: 36px;
                border-bottom-right-radius: 36px;
            }
            main .adv .swiper .btn, 
            main #store .swiper .btn{
                width: 54px;
                height: 54px;
                left: 30px;
            }
            main .adv .swiper .btn img, 
            main #store .swiper .btn img{
                width: 38%;
            }

            main #dev .in .txt{
                padding-left: 20px;
                padding-right: 20px;
                margin-top: 8vw;
            }
            main #dev .in .txt .pic{
                width: 35vw;
            }
            main #dev .in .txt .pic img{
                height: auto;
                object-fit: initial;
            }
            main #dev .in .txt .t{
                font-size: 3.5vw;
            }
            main #dev .in .txt .t span{
                font-size: 4vw;
            }
            main #dev .more a{
                font-size: 32px;
                line-height: 1.5;
                padding: 0px 30px;
            }

            main #service .edu .item{
                margin-top: 50px;
            }
            main #service .edu .item .list .box{
                /*
                width: 100%;
                margin-left: 0px;
                margin-top: 20px;
                box-shadow: 0px 0px 20px 10px rgba(0,0,0,.08);
                */
                border-radius: 20px;
                
            }
            main #service .edu .item .list .box:last-child{
                box-shadow: initial;
            }
            /*
            main #service .edu .item .list .box:first-child{
                margin-top: 0px
            }
            */

            main .join .question{
                margin: 60px auto;
            }
            main .join .list .inner{
                margin-left: -6px;
                /*display: block;*/
            }
            main .join .list .item {
                font-size: 30px;
                /*
                margin-top: 20px;
                */
                margin-left: 6px;
                width: calc(100% / 3 - 6px);
                border-radius: 20px;
            }
            main .join .list .item:nth-child(n + 4){
                margin-top: 20px;
            }
            main .join .list .item .txt{
                height: auto;
                padding: 15px 0px;
            }

            main #contact input{
                margin-left: 200px;
                width: calc(100% - 200px);
            }
            main #contact .agree{
                font-size: 30px;
            }

            main #store .swiper .storeSwp{
                height: 60vh;
            }
            main #store .swiper .storeSwp .item{
                width: 300px;
                border-radius: 24px;
            }
            main #store .swiper .storeSwp .item:first-child{
                width: 390px;
            }

            main .btm{
                margin-top: -50px;
                height: 400px;
            }
        }

        @media(max-width:767px){
            main #banner .headSwp .swiper-pagination{
                bottom: 80px;
            }
            main #banner .headSwp .swiper-pagination span{
                width: 12px;
                height: 12px;
                margin: 0px 5px;
            }
            main #banner .txt{
                padding-top: 40px;
            }
            main #banner .txt p:first-child{
                font-size: 40px;
                margin-bottom: 25px;
            }
            main #banner .txt p:nth-child(2){
                font-size: 28px;
                margin-bottom: 10px;
            }
            main #banner .txt .inner>span{
                font-size: 18px;
                line-height: 1.6;
                padding: 0px 15px;
            }

            main .adv{
                margin-top: 10px;
            }
            main .adv .swiper .btn{
                display: none;
            }
            main .adv .swiper {
                margin-top: 20px;
                padding-top: 10px;
                padding-bottom: 10px;
            }
            main .adv .swiper .advSwp .swiper-slide{
                width: 32vw;
                border-radius: 10px;
                box-shadow: 0px 0px 5px 3px rgba(0,0,0,.08);
            }
            main .adv .swiper .advSwp .swiper-slide .t .inner{
                font-size: 12px;
            }
            main .adv .swiper .advSwp .swiper-slide .t .inner p:last-child{
                margin-top: 5px;
                padding: 0px 10px;
            }
            main .adv .swiper .advSwp .swiper-slide i{
                height: 12px;
            }

            main .adv .swiper, 
            main #store .swiper{
                padding-left: 20px;
            }
            main .adv .swiper::before, 
            main #store .swiper::before{
                width: 100px;
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
            }
            
            main .adv .swiper::before{
                width: 60px;
                border-top-right-radius: 12px;
                border-bottom-right-radius: 12px;
            }
            main .adv .swiper .advSwp .swiper-slide .t{
                padding-bottom: 60px;
            }
            main #dev .more{
                padding-top: 220px;
                padding-bottom: 20px;
            }

            main #dev .content{
                margin-top: 20px;
            }
            main #dev .question{
                max-width: initial;
            }
            main #dev .in{
                border-radius: 40px;
            }
            main #dev .in .txt{
                margin-top: 30px;
                padding-bottom: 25px;
            }
            main #dev .in .txt .t{
                font-size: 3.2vw;
                padding-left: 20px;
            }
            main #dev .in .txt .t span{
                font-size: 3.5vw;
            }
            main #dev .more a{
                font-size: 20px;
                line-height: 36px;
            }
            

            main #service .question{
                margin: 15px auto;
            }
            main #service .edu .item{
                margin-top: 35px;
            }
            main #service .edu .item .list .box{
                width: calc(100% / 3 - 4px);
                margin-left: 6px;
                border-radius: 12px;
            }
            main #service .edu .item .list .box p:last-child{
                font-size: 14px;
                height: 50px;
            }
            main #service .edu .item>p{
                font-size: 20px;
                margin-top: -50px;
                padding-top: 60px;
                padding-bottom: 10px;
            }

            main .compare .heading {
                margin-top: 20px;
                margin-bottom: 10px;
                font-size: 24px;
            }
            main .compare .heading img{
                width: 68px;
            }
            main .compare .heading span{
                width: 80px;
            }
            main .compare .heading p{
                width: calc(50% - 40px);
            }
            main .compare .heading p:last-child{
                margin-left: 0px;
            }
            main .compare .list .item{
                height: 70px;
            }
            main .compare .list .item div{
                font-size: 14px;
                width: calc(50% - 5px);
                box-shadow: 0px 0px 10px 5px rgba(0,0,0,.08);
            }
            main .compare .list .item div:first-child{
                padding-right: 30px;
                border-top-right-radius: 10px;
                border-bottom-right-radius: 10px;
            }
            main .compare .list .item div:last-child{
                padding-left: 30px;
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                margin-left: 10px;
            }
            main .compare .list .item>p {
                width: 50px;
                height: 50px;
                line-height: 50px;
                font-size: 16px;
            }

            main .join .question{
                margin: 15px auto;
            }
            main .join .list .item{
                font-size: 14px;
                border-radius: 12px;
            }
            main .join .list .item .txt{
                padding: 10px 0px;
            }

            main #contact .ttl{
                margin-bottom: 10px;
            }
            main #contact .form-group{
                margin-top: 10px;
            }
            main #contact .form-group .title{
                font-size: 16px;
                display: inline-block;
                position: relative;
                top: 0px;
                transform: initial;
            }
            main #contact .form-group .title::after{
                left:calc(100% + 5px);
            }
            main #contact input{
                width: 100%;
                margin-left: 0px;
                font-size: 16px;
                line-height: 40px;
                margin-top: 5px;
                padding: 0px 15px;
                box-shadow: 0px 0px 10px 5px rgba(0,0,0,.1);
            }
            main #contact .code .title{
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                right: 20px;
                padding-left: 8px;
                font-size: 16px;
            }
            main #contact .city img{
                right: 20px;
                width: 20px;
                bottom: 20px;
            }
            main #contact .agree{
                padding-left: 24px;
                margin-top: 15px;
                margin-bottom: 20px;
                line-height: 1.4;
            }
            main #contact .agree i{
                width: 16px;
                height: 16px;
            }
            main #contact .agree i img{
                width: 100%;
                left: 2px;
            }
            main #contact .agree{
                font-size: 14px;
            }
            main #contact .agree span{
                margin-left: 2px;
            }
            main #contact .submit{
                font-size: 22px;
                line-height: 1.8;
                width: 240px;
            }
         
            main #store .swiper {
                margin-top: 30px;
                padding-top: 30px;
                padding-bottom: 30px;
            }
            main #store .swiper .storeSwp{
                height: 320px;
            }
            .mobileDevice main #store .swiper .storeSwp .item:nth-child(2n){
                margin-left: 10px;
            }
            main #store .swiper .storeSwp .item{
                width: 200px;
                border-radius: 20px;
                height: calc(50% - 5px);
            }
            main #store .swiper .storeSwp .item:nth-child(odd){
                top: calc(50% + 5px);
            }
            main #store .swiper .storeSwp .item:first-child{
                width: 240px;
            }
            main #store .swiper .btn{
                width: 40px;
                height: 40px;
                left: 20px;
            }
            main #store .swiper .prev{
                top: auto;
                bottom: 10px;
            }
            main #store .swiper .next{
                top: 10px;
                bottom: auto;
            }

            main .btm{
                height: 45vw;
                min-height: 240px;
            }
        }

        @media(max-width:480px){
            main #dev .in .txt{
                padding-left: 10px;
                padding-right: 10px;
            }
            main #dev .in .txt .pic{
                width: 32vw;
            }   
            main #dev .in .txt .t{
                font-size: 12px;
                padding-left: 10px;
            }
            main #dev .in .txt .t span{
                font-size: 14px;
            }
        }